<template>
	<view>
		<!-- 头部 -->
		<yHeader :current='4' :screenWidth="screenWidth" @Tabs="handleTabs"></yHeader>
		<!-- 内容 -->
		<view v-if="screenWidth>480" class="bg-grey py-4">
			<view class="__inner">
				<!-- 企业详情 -->
				<view class="flex w-100 mb-4 pb-4 bg-white">
					<view class="mx-4 w-100" style="">
						<view class="flex align-center border-bottom border-grey"
							style="box-sizing: border-box; height: 80rpx;">
							<text class="font font-weight-bold" :class="'text-'+ThemeColors">企业详情</text>
						</view>
						<view class="flex w-100" style="height:400rpx;">
							<!-- logo -->
							<view class="flex-shrink" style="width: 400rpx;height: 400rpx;">
								<image v-if="enterprise.Enterprise_Logo"
									:src="Domain_Business+enterprise.Enterprise_Logo" style="width: 100%;height: 100%;"
									mode=""></image>
								<image v-else src="../../static/icon/NoLogo.png" style="width: 100%;height: 100%;"
									mode=""></image>
							</view>
							<!-- 详情 -->
							<view class="flex flex-column w-100 ml-4" style="">
								<view class="" style="height: 20%;">
									<text class="h3 font-weight-bold">{{enterprise.Enterprise_Name}}</text>
								</view>
								<view class="" style="height: 15%;">
									<text class="font text-muted">企业地址：{{enterprise.Enterprise_Address}}</text>
								</view>
								<view class="" style="height: 60%;">
									<text v-if="enterprise.Enterprise_Profile!=''" class="font">企业文化：{{enterprise.Enterprise_Profile}}</text>
									<text v-else class="font text-muted">企业文化：该企业暂未填写相关企业文化</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 基地展示 -->
				<view class="flex w-100 mb-4 pb-2 bg-white">
					<view class="mx-4 w-100" style="">
						<view class="flex align-center border-bottom border-grey"
							style="box-sizing: border-box; height: 80rpx;">
							<text class="font font-weight-bold" :class="'text-'+ThemeColors">溯源基地展示</text>
						</view>
						<view @click="goTobaselarge()" class="flex w-100 mb-4" v-for="(item,index) in traceability"
							:key="index">
							<!-- 视频 -->
							<view class="flex-shrink">
								<video :src="Domain_Video + item.Video_URL"></video>
							</view>
							<!-- 详情 -->
							<view class="flex flex-column  w-100 ml-4" style="">
								<view class="" style="height: 20%;">
									<text class="h3 font-weight-bold">{{item.Traceability_Base_Name}}</text>
									<text class="font ml-4 text-muted">人数：{{item.People_Number}}</text>
								</view>
								<view class="" style="height: 15%;">
									<text class="font">生产经营：{{item.Traceability_Base_Production}}</text>
								</view>
								<view class="" style="height: 15%;">
									<text class="font">企业地址：{{item.Traceability_Base_Address}}</text>
								</view>
								<view class="" style="height: 60%;">
									<text class="font">{{item.Cultural_Information}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 发布商品 -->
				<view class="w-100 mb-4 pb-2 bg-white">
					<view class="mx-4" style="">
						<view class="flex align-center border-bottom border-grey"
							style="box-sizing: border-box; height: 80rpx;">
							<text class="font font-weight-bold" :class="'text-'+ThemeColors">供应商品</text>
						</view>
						<yTable :loading="loading" @row-click="handleDetail" @limitval="limitval" @pageval="pageval"
							:page="form.page" :limit="form.limit" :total="total" :tableData="tableData">
							<el-table-column align="center" label="商品图片" width="150">
								<template v-slot="{row}">
									<view class="w-100 text-ellipsis flex align-center justify-center"
										:title="row.Article_Name">
										<image v-if="row.Picture_URL!=void 0" style="width: 150rpx;height: 150rpx;"
											:src="Domain_IMG + row.Picture_URL" mode=""></image>
									</view>
								</template>
							</el-table-column>
							<el-table-column align="center" label="商品品种" width="100">
								<template v-slot="{row}">
									<view class="w-100 text-ellipsis flex align-center justify-center"
										:title="row.Article_Name">
										<text>{{row.Article_Name}}</text>
									</view>
								</template>
							</el-table-column>
							<el-table-column align="center" prop="Total_Quantity" label="销售数量" width="180">
								<template v-slot="{row}">
									<view class="w-100 text-ellipsis" :title="row.Total_Quantity+'/'+row.Unit">
										<text>{{row.Total_Quantity+'/'+row.Unit}}</text>
									</view>
								</template>
							</el-table-column>
							<el-table-column align="center" label="所属企业">
								<template v-slot="{row}">
									<view class="w-100 text-ellipsis" :title="row.Enterprise_Name">
										<text>{{row.Enterprise_Name}}</text>
									</view>
								</template>
							</el-table-column>
							<el-table-column align="center" label="发布人">
								<template v-slot="{row}">
									<view class="w-100 text-ellipsis" :title="row.Contacts">
										<text>{{row.Contacts}}</text>
									</view>
								</template>
							</el-table-column>
							<el-table-column align="center" label="认证情况">
								<template v-slot="{row}">
									<image style="width: 40rpx;height: 40rpx;" src="../../static/icon/order-success.png"
										mode=""></image>
								</template>
							</el-table-column>
							<el-table-column label="详情" align="center" prop="address">
								<template v-slot="{row}">
									<text :class="'text-'+ThemeColors">查看详情</text>
								</template>
							</el-table-column>
						</yTable>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<yFooter Show  v-if="screenWidth>480" :screenWidth="screenWidth"></yFooter>
	</view>
</template>

<script>
	const app = getApp();
	import yHeader from '@/components/yHeader.vue'
	import yFooter from '@/components/yFooter.vue'
	import yTable from '@/components/yTable.vue'
	import {
		TraceabilityEnterpriseID
	} from '@/api/traceability.js'
	import {
		GroupProcureAll
	} from '@/api/group.js'
	export default {
		components: {
			yHeader,
			yFooter,
			yTable,
		},
		data() {
			return {
				screenWidth: uni.getSystemInfoSync().windowWidth,
				ThemeColors: app.globalData.ThemeColors,
				Domain_IMG: app.globalData.Domain_IMG,
				Domain_Business: app.globalData.Domain_Business,
				Domain_Video: app.globalData.Domain_Video,
				form: {
					Article_Name: "",
					Category_SerialNumber: "",
					Enterprise_Info_SerialNumber: "",
					Type: "0",
					page: 1, //页数
					limit: 5, //每页数据条数
				},
				loading: true,
				total: 0,
				tableData: [],
				enterprise: {},
				traceability: [],
			}
		},
		onLoad(options) {
			this.form.Enterprise_Info_SerialNumber = options.id
			this.getData(options.id)
			this.getSupply(this.form)
		},
		methods: {
			handleTabs(url) {
				uni.navigateTo({
					url
				})
			},
			pageval(e) {
				console.log(e)
				this.form.page = e
				this.getSupply(this.form)
			},
			limitval(e) {
				this.form.page = 1
				this.form.limit = e
				this.getSupply(this.form)
			},
			handleDetail(row) {
				uni.navigateTo({
					url: "/pages/detail/supply-detail?id=" + row.Group_Purchasing_SerialNumber,
				});
			},
			async getData(Enterprise_Info_SerialNumber) {
				const res = await TraceabilityEnterpriseID({
					data: {
						Enterprise_Info_SerialNumber
					}
				})
				if (res.redirect && res.redirect == 'REDIRECT') {
					console.log(res.redirect);
				} else if (res.Status == 'success') {
					this.enterprise = res.Data
					this.traceability = res.Traceability
				}
			},
			async getSupply(data) { //分页查询所有供应数据
				const res = await GroupProcureAll({
					data
				})
				if (res.redirect && res.redirect == 'REDIRECT') {
					console.log(res.redirect);
				} else if (res.Status == 'success') {
					this.tableData = res.tableData
					this.total = parseInt(res.limit)
					this.loading = false
				}
			},
			goTobaselarge() {
				window.location.href = 'https://digital.essc.top/dist/h5Test/baselarge/index.html'
			}
		}
	}
</script>

<style>

</style>